<!-- 产品入库 -->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" style="width: 100%">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="成品货号">
              <a-input
                placeholder="请输入成品货号"
                v-model:value="state.queryParam.productCode"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button
                type="primary"
                @click="searchReset"
                style="margin-left: 8px"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="text-align: right">
      <a-button
        style="margin-left: auto"
        type="primary"
        @click="handleExportXls()"
        >导出</a-button
      >
    </div>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ state.selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="state.columns"
        :dataSource="state.dataSource"
        :pagination="state.ipagination"
        :loading="state.loading"
        :rowSelection="{
          fixed: true,
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectChange,
        }"
        @change="handleTableChange"
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无此图片</span
          >
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt="图片不存在"
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic"
            >无此文件</span
          >
          <a-button
            v-else
            :ghost="true"
            type="primary"
            size="small"
            @click="uploadFile(text)"
          >
            下载
          </a-button>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script setup>
import { ref, reactive, nextTick, computed, onMounted } from "vue";
import { message } from "ant-design-vue";
import { GetProductOutputList, ExportProductOutput} from "../../wailsjs/go/controller/ProductManagement";

const state = reactive({
  description: "成品出库",
  columns: [
    {
      title: "成品货号",
      align: "center",
      dataIndex: "productCode",
    },
    {
      title: "成品SKU",
      align: "center",
      dataIndex: "productSku",
    },
    {
      title: "出库量",
      align: "center",
      dataIndex: "outboundQuantity",
    },
    {
      title: "备注",
      align: "center",
      dataIndex: "remark",
    },
    {
      title: "创建时间",
      align: "center",
      dataIndex: "createTime",
      width: 180,
    },
  ],
  dictOptions: {},
  queryParam: {},
  dataSource: [],
  ipagination: {
    current: 1,
    pageSize: 10,
    pageSizeOptions: ["10", "20", "30"],
    showTotal: (total, range) => {
      return `${range[0]}-${range[1]} 共 ${total} 条`;
    },
    showQuickJumper: true,
    showSizeChanger: true,
    total: 0,
  },
  isorter: {
    column: "createTime",
    order: "desc",
  },
  filters: {},
  loading: false,
  selectedRowKeys: [],
  selectionRows: [],
  toggleSearchStatus: false,
  superQueryFlag: false,
  superQueryParams: "",
  autoSearch: true,
});

const importExcelUrl = computed(() => {
  // ... 省略计算属性实现
});

onMounted(() => {
  if (state.autoSearch) {
    loadData();
  }
  initDictConfig();
});

function initDictConfig() {
  // ... 初始化字典配置
}

function loadData(arg) {
  // ... 加载数据逻辑
  GetProductOutputList(arg).then((res) => {
    if (res["code"] == 200) {
      message.success(res["message"]);
    } else {
      message.error(res["message"]);
    }
    console.log("GetProductOutputList Res");
    state.dataSource = res["data"];
  });
}

function searchQuery() {
  loadData(state.queryParam.productCode);
}

function onSelectChange(selectedRowKeys, selectionRows) {
  state.selectedRowKeys = selectedRowKeys;
  state.selectionRows = selectionRows;
}

function onClearSelected() {
  state.selectedRowKeys = [];
  state.selectionRows = [];
}

function handleExportXls() {
  ExportProductOutput().then((res) => {
    console.log(res);
    if (res["code"] == 200) {
      message.success(res["message"]);
    } else {
      message.error(res["message"]);
    }
  });
}

function searchReset() {
  state.queryParam.productCode = ref('');
  loadData(state.queryParam.productCode);
}

function handleTableChange(pagination, filters, sorter) {
  if (Object.keys(sorter).length > 0) {
    state.isorter.column = sorter.field;
    state.isorter.order = sorter.order === "ascend" ? "asc" : "desc";
  }
  state.ipagination = pagination;
  loadData();
}

defineExpose({ importExcelUrl });
</script>
<style scoped>
@import "../assets/less/common.less";
</style>
